<!--<template>-->
<!--  <div class="customer-home">-->
<!--    &lt;!&ndash; 顶部导航栏 &ndash;&gt;-->
<!--    <header class="header">-->
<!--      <div class="header-content d-flex justify-content-between align-items-center">-->
<!--        <div class="d-flex align-items-center">-->
<!--          <i class="fa fa-user-circle mr-3 text-primary" style="font-size: 28px;"></i>-->
<!--          <h2>顾客主页</h2>-->
<!--        </div>-->
<!--        <div class="d-flex align-items-center">-->
<!--          <div class="weather-info mr-4">-->
<!--            <i class="fa fa-sun text-yellow-500 mr-1"></i>-->
<!--            <span>{{ weatherInfo.temp }}°C | {{ weatherInfo.description }}</span>-->
<!--          </div>-->
<!--          <button @click="logout" class="btn btn-danger">-->
<!--            <i class="fa fa-sign-out mr-2"></i>退出登录-->
<!--          </button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </header>-->

<!--    &lt;!&ndash; 欢迎信息 &ndash;&gt;-->
<!--    <div class="welcome-section mt-4 p-4 bg-white rounded-lg shadow-sm">-->
<!--      <div class="d-flex flex-wrap justify-content-between align-items-center">-->
<!--        <div>-->
<!--          <p class="mb-1">欢迎回来，<strong>{{ contactName }}</strong>！</p>-->
<!--          <p class="text-muted mb-0">您的身份是：<span class="badge bg-primary">顾客</span></p>-->
<!--        </div>-->
<!--        <div class="mt-2 mt-md-0">-->
<!--          <div class="d-flex align-items-center">-->
<!--            <i class="fa fa-calendar-alt text-gray-500 mr-2"></i>-->
<!--            <span>{{ currentDate }}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 快捷操作按钮 &ndash;&gt;-->
<!--    <div class="quick-actions mt-4 bg-light p-3 rounded-lg shadow-sm">-->
<!--      <router-link to="/customer/change-password" class="btn btn-secondary">-->
<!--        <i class="fa fa-key mr-2"></i>修改密码-->
<!--      </router-link>-->
<!--      <router-link to="/customer/audit-contracts" class="btn btn-primary">-->
<!--        <i class="fa fa-clipboard-check mr-2"></i>审核合同-->
<!--      </router-link>-->
<!--      <router-link to="/customer/contracts" class="btn btn-info">-->
<!--        <i class="fa fa-file-contract mr-2"></i>查看相关合同-->
<!--      </router-link>-->
<!--      <router-link to="/customer/confirm-contracts" class="btn btn-success">-->
<!--        <i class="fa fa-handshake mr-2"></i>确认合同-->
<!--      </router-link>-->
<!--      <router-link to="/customer/ongoing-contracts" class="btn btn-warning">-->
<!--        <i class="fa fa-spinner mr-2"></i>进行中的合同-->
<!--      </router-link>-->
<!--      &lt;!&ndash; 新增：已归档合同按钮 &ndash;&gt;-->
<!--      <router-link to="/customer/archived-contracts" class="btn btn-dark">-->
<!--        <i class="fa fa-archive mr-2"></i>已归档合同-->
<!--      </router-link>-->
<!--      &lt;!&ndash; 新增：查看统计信息按钮 &ndash;&gt;-->
<!--      <button @click="openStatsModal" class="btn btn-info">-->
<!--        <i class="fa fa-bar-chart mr-2"></i>查看统计信息-->
<!--      </button>-->
<!--    </div>-->

<!--    &lt;!&ndash; 主要内容区 - 左右分栏布局 &ndash;&gt;-->
<!--    <div class="main-content mt-4">-->
<!--      <div class="row gap-4">-->
<!--        &lt;!&ndash; 左侧：合同统计卡片 &ndash;&gt;-->
<!--        <div class="col-lg-8">-->
<!--          <div class="p-3 bg-white rounded-lg shadow-sm">-->
<!--            <h3 class="mb-4 pb-2 border-bottom">合同状态统计</h3>-->
<!--            <div class="stats-cards" v-if="!loading">-->
<!--              <div class="row gap-3">-->
<!--                <div class="col-md-6">-->
<!--                  <div class="card bg-light hover-effect">-->
<!--                    <div class="card-body">-->
<!--                      <div class="d-flex justify-content-between align-items-start">-->
<!--                        <div>-->
<!--                          <h5 class="card-title mb-1">待审核合同</h5>-->
<!--                          <p class="card-text text-muted mb-0">-->
<!--                            <span class="stat-number">{{ pendingAuditCount }}</span>-->
<!--                            <span class="stat-desc">份合同需要您审核</span>-->
<!--                          </p>-->
<!--                        </div>-->
<!--                        <div class="icon-circle bg-primary text-white p-2">-->
<!--                          <i class="fa fa-clipboard-check"></i>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                      <a href="#" @click="goToAuditContracts" class="card-link mt-3 d-inline-block">查看详情</a>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->

<!--                <div class="col-md-6">-->
<!--                  <div class="card bg-warning text-dark hover-effect">-->
<!--                    <div class="card-body">-->
<!--                      <div class="d-flex justify-content-between align-items-start">-->
<!--                        <div>-->
<!--                          <h5 class="card-title mb-1">进行中的合同</h5>-->
<!--                          <p class="card-text text-muted mb-0">-->
<!--                            <span class="stat-number">{{ ongoingCount }}</span>-->
<!--                            <span class="stat-desc">份合同正在履行中</span>-->
<!--                          </p>-->
<!--                        </div>-->
<!--                        <div class="icon-circle bg-warning text-dark p-2">-->
<!--                          <i class="fa fa-spinner"></i>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                      <a href="#" @click="goToOngoingContracts" class="card-link mt-3 d-inline-block">查看详情</a>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->

<!--                <div class="col-md-6">-->
<!--                  <div class="card bg-success text-white hover-effect">-->
<!--                    <div class="card-body">-->
<!--                      <div class="d-flex justify-content-between align-items-start">-->
<!--                        <div>-->
<!--                          <h5 class="card-title mb-1">已完成合同</h5>-->
<!--                          <p class="card-text text-muted mb-0">-->
<!--                            <span class="stat-number">{{ completedCount }}</span>-->
<!--                            <span class="stat-desc">份合同已成功完成</span>-->
<!--                          </p>-->
<!--                        </div>-->
<!--                        <div class="icon-circle bg-success text-white p-2">-->
<!--                          <i class="fa fa-check-circle"></i>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                      <a href="#" @click="goToContracts" class="card-link mt-3 d-inline-block text-light">查看详情</a>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->

<!--                <div class="col-md-6">-->
<!--                  <div class="card bg-dark text-white hover-effect">-->
<!--                    <div class="card-body">-->
<!--                      <div class="d-flex justify-content-between align-items-start">-->
<!--                        <div>-->
<!--                          <h5 class="card-title mb-1">已归档合同</h5>-->
<!--                          <p class="card-text text-muted mb-0">-->
<!--                            <span class="stat-number">{{ archivedCount }}</span>-->
<!--                            <span class="stat-desc">份合同已归档</span>-->
<!--                          </p>-->
<!--                        </div>-->
<!--                        <div class="icon-circle bg-gray-600 text-white p-2">-->
<!--                          <i class="fa fa-archive"></i>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                      <a href="#" @click="goToArchivedContracts" class="card-link mt-3 d-inline-block text-light">查看详情</a>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 右侧：日历 &ndash;&gt;-->
<!--        <div class="col-lg-4">-->
<!--          &lt;!&ndash; 日历组件 &ndash;&gt;-->
<!--          <div class="p-3 bg-white rounded-lg shadow-sm">-->
<!--            <h3 class="mb-4 pb-2 border-bottom">本月日历</h3>-->
<!--            <div class="calendar">-->
<!--              <div class="calendar-header">-->
<!--                <div class="month-year">{{ currentMonthName }} {{ currentYear }}</div>-->
<!--              </div>-->
<!--              <div class="calendar-days">-->
<!--                <div class="day-header">日</div>-->
<!--                <div class="day-header">一</div>-->
<!--                <div class="day-header">二</div>-->
<!--                <div class="day-header">三</div>-->
<!--                <div class="day-header">四</div>-->
<!--                <div class="day-header">五</div>-->
<!--                <div class="day-header">六</div>-->

<!--                &lt;!&ndash; 日历天数 - 标出当前日期 &ndash;&gt;-->
<!--                <div v-for="day in 42" :key="day" class="calendar-day">-->
<!--                  <div-->
<!--                      v-if="day <= daysInMonth"-->
<!--                      :class="{ 'current-day': isCurrentDay(day) }"-->
<!--                      class="day-number"-->
<!--                  >-->
<!--                    {{ day }}-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="d-flex justify-content-end mt-3">-->
<!--                <button @click="prevMonth" class="btn btn-sm btn-outline-primary mr-2">-->
<!--                  <i class="fa fa-chevron-left"></i>-->
<!--                </button>-->
<!--                <button @click="nextMonth" class="btn btn-sm btn-outline-primary">-->
<!--                  <i class="fa fa-chevron-right"></i>-->
<!--                </button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 新增：统计信息模态框 &ndash;&gt;-->
<!--    <div v-if="showStatsModal" class="stats-modal-overlay">-->
<!--      <div class="stats-modal" style="width: 500px;">-->
<!--        <div class="stats-modal-header d-flex justify-content-between align-items-center">-->
<!--          <h3>合同统计信息</h3>-->
<!--          <button @click="closeStatsModal" class="close-btn">-->
<!--            <i class="fa fa-times"></i>-->
<!--          </button>-->
<!--        </div>-->
<!--        <div class="stats-modal-body">-->
<!--          <div class="chart-container" style="height: 300px;">-->
<!--            <canvas id="contractChart"></canvas>-->
<!--          </div>-->
<!--          <div class="stats-list">-->
<!--            <div class="stat-item">-->
<!--              <div class="stat-label">待审核合同</div>-->
<!--              <div class="stat-value">{{ pendingAuditCount }}</div>-->
<!--            </div>-->
<!--            <div class="stat-item">-->
<!--              <div class="stat-label">进行中的合同</div>-->
<!--              <div class="stat-value">{{ ongoingCount }}</div>-->
<!--            </div>-->
<!--            <div class="stat-item">-->
<!--              <div class="stat-label">已完成合同</div>-->
<!--              <div class="stat-value">{{ completedCount }}</div>-->
<!--            </div>-->
<!--            <div class="stat-item">-->
<!--              <div class="stat-label">已归档合同</div>-->
<!--              <div class="stat-value">{{ archivedCount }}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="stats-modal-footer">-->
<!--          <button @click="closeStatsModal" class="btn btn-primary">-->
<!--            关闭-->
<!--          </button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 加载状态 &ndash;&gt;-->
<!--    <div v-if="loading" class="loading-container mt-4">-->
<!--      <div class="spinner"></div>-->
<!--      <p>加载合同统计数据中...</p>-->
<!--    </div>-->

<!--    &lt;!&ndash; 错误提示 &ndash;&gt;-->
<!--    <div v-if="errorMessage" class="error-container mt-4">-->
<!--      <div class="error-message">-->
<!--        <i class="fa fa-exclamation-circle mr-2"></i>{{ errorMessage }}-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { computed, ref, onMounted, nextTick, onUnmounted } from 'vue'-->
<!--import { useStore } from 'vuex'-->
<!--import { useRouter } from 'vue-router'-->
<!--import { Chart } from 'chart.js/auto'-->

<!--export default {-->
<!--  name: 'CustomerHome',-->
<!--  setup() {-->
<!--    const store = useStore()-->
<!--    const router = useRouter()-->

<!--    // 用户信息-->
<!--    const customer = computed(() => store.state.user)-->

<!--    // 合同统计数据-->
<!--    const pendingAuditCount = ref(0)-->
<!--    const ongoingCount = ref(0)-->
<!--    const completedCount = ref(0)-->
<!--    const archivedCount = ref(0)-->

<!--    // 日历相关-->
<!--    const currentDate = ref('')-->
<!--    const currentMonth = ref(new Date().getMonth())-->
<!--    const currentYear = ref(new Date().getFullYear())-->
<!--    const currentMonthName = ref('')-->
<!--    const daysInMonth = ref(0)-->

<!--    // 天气相关-->
<!--    const weatherInfo = ref({-->
<!--      temp: '加载中',-->
<!--      description: '获取天气中...'-->
<!--    })-->

<!--    // 新增：统计模态框控制-->
<!--    const showStatsModal = ref(false)-->
<!--    let contractChart = null-->

<!--    // 加载状态和错误信息-->
<!--    const loading = ref(true)-->
<!--    const errorMessage = ref('')-->

<!--    // 判断是否为当前日期-->
<!--    const isCurrentDay = (day) => {-->
<!--      const now = new Date()-->
<!--      return (-->
<!--          day === now.getDate() &&-->
<!--          currentMonth.value === now.getMonth() &&-->
<!--          currentYear.value === now.getFullYear()-->
<!--      )-->
<!--    }-->

<!--    // 获取合同统计数据-->
<!--    const fetchContractStats = () => {-->
<!--      loading.value = true-->
<!--      errorMessage.value = ''-->

<!--      const customerId = customer.value?.id-->

<!--      if (!customerId) {-->
<!--        errorMessage.value = '用户信息不完整，请重新登录'-->
<!--        loading.value = false-->
<!--        return-->
<!--      }-->

<!--      // 模拟获取合同统计数据（实际项目中替换为API调用）-->
<!--      pendingAuditCount.value = Math.floor(Math.random() * 5)-->
<!--      ongoingCount.value = Math.floor(Math.random() * 10)-->
<!--      completedCount.value = Math.floor(Math.random() * 20)-->
<!--      archivedCount.value = Math.floor(Math.random() * 15)-->

<!--      loading.value = false-->
<!--    }-->

<!--    // 新增：初始化图表-->
<!--    const initChart = () => {-->
<!--      nextTick(() => {-->
<!--        const ctx = document.getElementById('contractChart')-->

<!--        if (contractChart) {-->
<!--          contractChart.destroy()-->
<!--        }-->

<!--        contractChart = new Chart(ctx, {-->
<!--          type: 'doughnut',-->
<!--          data: {-->
<!--            labels: ['待审核', '进行中', '已完成', '已归档'],-->
<!--            datasets: [{-->
<!--              data: [-->
<!--                pendingAuditCount.value,-->
<!--                ongoingCount.value,-->
<!--                completedCount.value,-->
<!--                archivedCount.value-->
<!--              ],-->
<!--              backgroundColor: [-->
<!--                '#0d6efd',-->
<!--                '#ffc107',-->
<!--                '#28a745',-->
<!--                '#343a40'-->
<!--              ],-->
<!--              borderWidth: 0-->
<!--            }]-->
<!--          },-->
<!--          options: {-->
<!--            responsive: true,-->
<!--            maintainAspectRatio: false,-->
<!--            plugins: {-->
<!--              legend: {-->
<!--                position: 'bottom'-->
<!--              }-->
<!--            },-->
<!--            cutout: '70%'-->
<!--          }-->
<!--        })-->
<!--      })-->
<!--    }-->

<!--    // 新增：模态框控制方法-->
<!--    const openStatsModal = () => {-->
<!--      showStatsModal.value = true-->
<!--      // 等待模态框渲染完成后初始化图表-->
<!--      nextTick(() => {-->
<!--        initChart()-->
<!--      })-->
<!--    }-->

<!--    const closeStatsModal = () => {-->
<!--      showStatsModal.value = false-->
<!--    }-->

<!--    // 导航方法-->
<!--    const goToAuditContracts = () => {-->
<!--      router.push('/customer/audit-contracts')-->
<!--    }-->

<!--    const goToOngoingContracts = () => {-->
<!--      router.push('/customer/ongoing-contracts')-->
<!--    }-->

<!--    const goToContracts = () => {-->
<!--      router.push('/customer/contracts')-->
<!--    }-->

<!--    const goToArchivedContracts = () => {-->
<!--      router.push('/customer/archived-contracts')-->
<!--    }-->

<!--    const logout = () => {-->
<!--      localStorage.removeItem('user')-->
<!--      store.commit('setUser', null)-->
<!--      router.push('/login')-->
<!--    }-->

<!--    // 获取当前日期和日历信息-->
<!--    const updateDateInfo = () => {-->
<!--      const now = new Date()-->
<!--      const year = now.getFullYear()-->
<!--      const month = now.getMonth()-->
<!--      const day = now.getDate()-->
<!--      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']-->
<!--      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']-->

<!--      currentDate.value = `${year}年${month + 1}月${day}日 ${days[now.getDay()]}`-->
<!--      currentMonth.value = month-->
<!--      currentYear.value = year-->
<!--      currentMonthName.value = monthNames[month]-->

<!--      // 计算当月天数-->
<!--      daysInMonth.value = new Date(year, month + 1, 0).getDate()-->
<!--    }-->

<!--    // 获取天气信息-->
<!--    const fetchWeather = () => {-->
<!--      const weatherData = {-->
<!--        temp: Math.floor(Math.random() * 30) + 10,-->
<!--        description: ['晴天', '多云', '小雨', '阴天'][Math.floor(Math.random() * 4)]-->
<!--      }-->
<!--      weatherInfo.value = weatherData-->
<!--    }-->

<!--    // 切换月份-->
<!--    const prevMonth = () => {-->
<!--      currentMonth.value = (currentMonth.value - 1 + 12) % 12-->
<!--      if (currentMonth.value === 11) {-->
<!--        currentYear.value&#45;&#45;-->
<!--      }-->
<!--      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']-->
<!--      currentMonthName.value = monthNames[currentMonth.value]-->
<!--      daysInMonth.value = new Date(currentYear.value, currentMonth.value + 1, 0).getDate()-->
<!--    }-->

<!--    const nextMonth = () => {-->
<!--      currentMonth.value = (currentMonth.value + 1) % 12-->
<!--      if (currentMonth.value === 0) {-->
<!--        currentYear.value++-->
<!--      }-->
<!--      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']-->
<!--      currentMonthName.value = monthNames[currentMonth.value]-->
<!--      daysInMonth.value = new Date(currentYear.value, currentMonth.value + 1, 0).getDate()-->
<!--    }-->

<!--    // 组件生命周期-->
<!--    onMounted(() => {-->
<!--      updateDateInfo()-->
<!--      fetchWeather()-->
<!--      fetchContractStats()-->

<!--      // 每月1日自动更新日历-->
<!--      const date = new Date()-->
<!--      if (date.getDate() === 1) {-->
<!--        updateDateInfo()-->
<!--      }-->

<!--      // 设置定时器每天更新日期和天气-->
<!--      setInterval(() => {-->
<!--        updateDateInfo()-->
<!--        fetchWeather()-->
<!--      }, 24 * 60 * 60 * 1000)-->
<!--    })-->

<!--    onUnmounted(() => {-->
<!--      // 组件销毁时销毁图表实例-->
<!--      if (contractChart) {-->
<!--        contractChart.destroy()-->
<!--      }-->
<!--    })-->

<!--    return {-->
<!--      contactName: customer.value?.contactName || '访客',-->
<!--      pendingAuditCount,-->
<!--      ongoingCount,-->
<!--      completedCount,-->
<!--      archivedCount,-->
<!--      currentDate,-->
<!--      currentMonthName,-->
<!--      currentYear,-->
<!--      daysInMonth,-->
<!--      weatherInfo,-->
<!--      prevMonth,-->
<!--      nextMonth,-->
<!--      isCurrentDay,-->
<!--      loading,-->
<!--      errorMessage,-->
<!--      logout,-->
<!--      goToAuditContracts,-->
<!--      goToOngoingContracts,-->
<!--      goToContracts,-->
<!--      goToArchivedContracts,-->
<!--      // 新增：统计相关返回值-->
<!--      showStatsModal,-->
<!--      openStatsModal,-->
<!--      closeStatsModal-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<template>
  <div class="customer-home">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
          <i class="fa fa-user-circle mr-3 text-primary" style="font-size: 28px;"></i>
          <h2>顾客主页</h2>
        </div>
        <div class="d-flex align-items-center">
          <div class="weather-info mr-4">
            <i class="fa fa-sun text-yellow-500 mr-1"></i>
            <span>{{ weatherInfo.temp }}°C | {{ weatherInfo.description }}</span>
          </div>
          <button @click="logout" class="btn btn-danger">
            <i class="fa fa-sign-out mr-2"></i>退出登录
          </button>
        </div>
      </div>
    </header>

    <!-- 欢迎信息 -->
    <div class="welcome-section mt-4 p-4 bg-white rounded-lg shadow-sm">
      <div class="d-flex flex-wrap justify-content-between align-items-center">
        <div>
          <p class="mb-1">欢迎回来，<strong>{{ contactName }}</strong>！</p>
          <p class="text-muted mb-0">您的身份是：<span class="badge bg-primary">顾客</span></p>
        </div>
        <div class="mt-2 mt-md-0">
          <div class="d-flex align-items-center">
            <i class="fa fa-calendar-alt text-gray-500 mr-2"></i>
            <span>{{ currentDate }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷操作按钮 -->
    <div class="quick-actions mt-4 bg-light p-3 rounded-lg shadow-sm">
      <router-link to="/customer/change-password" class="btn btn-secondary">
        <i class="fa fa-key mr-2"></i>修改密码
      </router-link>
      <router-link to="/customer/audit-contracts" class="btn btn-primary">
        <i class="fa fa-clipboard-check mr-2"></i>审核合同
      </router-link>
      <router-link to="/customer/contracts" class="btn btn-info">
        <i class="fa fa-file-contract mr-2"></i>查看相关合同
      </router-link>
      <router-link to="/customer/confirm-contracts" class="btn btn-success">
        <i class="fa fa-handshake mr-2"></i>确认合同
      </router-link>
      <router-link to="/customer/ongoing-contracts" class="btn btn-warning">
        <i class="fa fa-spinner mr-2"></i>进行中的合同
      </router-link>
      <router-link to="/customer/archived-contracts" class="btn btn-dark">
        <i class="fa fa-archive mr-2"></i>已归档合同
      </router-link>
      <button @click="openStatsModal" class="btn btn-info">
        <i class="fa fa-bar-chart mr-2"></i>查看统计信息
      </button>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content mt-4">
      <div class="row gap-4">
        <!-- 左侧：合同统计卡片 -->
        <div class="col-lg-8">
          <div class="p-3 bg-white rounded-lg shadow-sm">
            <h3 class="mb-4 pb-2 border-bottom">合同状态统计</h3>
            <div class="stats-cards" v-if="!loading">
              <div class="row gap-3">
                <div class="col-md-6">
                  <div class="card bg-light hover-effect">
                    <div class="card-body">
                      <div class="d-flex justify-content-between align-items-start">
                        <div>
                          <h5 class="card-title mb-1">待审核合同</h5>
                          <p class="card-text text-muted mb-0">
                            <span class="stat-number">{{ pendingAuditCount }}</span>
                            <span class="stat-desc">份合同需要您审核</span>
                          </p>
                        </div>
                        <div class="icon-circle bg-primary text-white p-2">
                          <i class="fa fa-clipboard-check"></i>
                        </div>
                      </div>
                      <a href="#" @click="goToAuditContracts" class="card-link mt-3 d-inline-block">查看详情</a>
                    </div>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="card bg-warning text-dark hover-effect">
                    <div class="card-body">
                      <div class="d-flex justify-content-between align-items-start">
                        <div>
                          <h5 class="card-title mb-1">进行中的合同</h5>
                          <p class="card-text text-muted mb-0">
                            <span class="stat-number">{{ ongoingCount }}</span>
                            <span class="stat-desc">份合同正在履行中</span>
                          </p>
                        </div>
                        <div class="icon-circle bg-warning text-dark p-2">
                          <i class="fa fa-spinner"></i>
                        </div>
                      </div>
                      <a href="#" @click="goToOngoingContracts" class="card-link mt-3 d-inline-block">查看详情</a>
                    </div>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="card bg-success text-white hover-effect">
                    <div class="card-body">
                      <div class="d-flex justify-content-between align-items-start">
                        <div>
                          <h5 class="card-title mb-1">已完成合同</h5>
                          <p class="card-text text-muted mb-0">
                            <span class="stat-number">{{ completedCount }}</span>
                            <span class="stat-desc">份合同已成功完成</span>
                          </p>
                        </div>
                        <div class="icon-circle bg-success text-white p-2">
                          <i class="fa fa-check-circle"></i>
                        </div>
                      </div>
                      <a href="#" @click="goToContracts" class="card-link mt-3 d-inline-block text-light">查看详情</a>
                    </div>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="card bg-dark text-white hover-effect">
                    <div class="card-body">
                      <div class="d-flex justify-content-between align-items-start">
                        <div>
                          <h5 class="card-title mb-1">已归档合同</h5>
                          <p class="card-text text-muted mb-0">
                            <span class="stat-number">{{ archivedCount }}</span>
                            <span class="stat-desc">份合同已归档</span>
                          </p>
                        </div>
                        <div class="icon-circle bg-gray-600 text-white p-2">
                          <i class="fa fa-archive"></i>
                        </div>
                      </div>
                      <a href="#" @click="goToArchivedContracts" class="card-link mt-3 d-inline-block text-light">查看详情</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：日历 -->
        <div class="col-lg-4">
          <div class="p-3 bg-white rounded-lg shadow-sm">
            <h3 class="mb-4 pb-2 border-bottom">本月日历</h3>
            <div class="calendar">
              <div class="calendar-header">
                <div class="month-year">{{ currentMonthName }} {{ currentYear }}</div>
              </div>
              <div class="calendar-days">
                <div class="day-header">日</div>
                <div class="day-header">一</div>
                <div class="day-header">二</div>
                <div class="day-header">三</div>
                <div class="day-header">四</div>
                <div class="day-header">五</div>
                <div class="day-header">六</div>

                <div v-for="day in 42" :key="day" class="calendar-day">
                  <div
                      v-if="day <= daysInMonth"
                      :class="{ 'current-day': isCurrentDay(day) }"
                      class="day-number"
                  >
                    {{ day }}
                  </div>
                </div>
              </div>
              <div class="d-flex justify-content-end mt-3">
                <button @click="prevMonth" class="btn btn-sm btn-outline-primary mr-2">
                  <i class="fa fa-chevron-left"></i>
                </button>
                <button @click="nextMonth" class="btn btn-sm btn-outline-primary">
                  <i class="fa fa-chevron-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计信息模态框 -->
    <div v-if="showStatsModal" class="stats-modal-overlay">
      <div class="stats-modal" style="width: 500px;">
        <div class="stats-modal-header d-flex justify-content-between align-items-center">
          <h3>合同统计信息</h3>
          <button @click="closeStatsModal" class="close-btn">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="stats-modal-body">
          <div class="chart-container" style="height: 300px;">
            <canvas id="contractChart"></canvas>
          </div>
          <div class="stats-list">
            <div class="stat-item">
              <div class="stat-label">待审核合同</div>
              <div class="stat-value">{{ pendingAuditCount }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">进行中的合同</div>
              <div class="stat-value">{{ ongoingCount }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">已完成合同</div>
              <div class="stat-value">{{ completedCount }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">已归档合同</div>
              <div class="stat-value">{{ archivedCount }}</div>
            </div>
          </div>
        </div>
        <div class="stats-modal-footer">
          <button @click="closeStatsModal" class="btn btn-primary">
            关闭
          </button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container mt-4">
      <div class="spinner"></div>
      <p>加载合同统计数据中...</p>
    </div>

    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error-container mt-4">
      <div class="error-message">
        <i class="fa fa-exclamation-circle mr-2"></i>{{ errorMessage }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'  // 引入axios用于接口请求
import { computed, ref, onMounted, nextTick, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { Chart } from 'chart.js/auto'

export default {
  name: 'CustomerHome',
  setup() {
    const store = useStore()
    const router = useRouter()

    // 用户信息（从Vuex获取当前登录顾客）
    const customer = computed(() => store.state.user)

    // 合同统计数据（初始化为0）
    const pendingAuditCount = ref(0)  // 待审核合同数
    const ongoingCount = ref(0)       // 进行中的合同数
    const completedCount = ref(0)     // 已完成合同数
    const archivedCount = ref(0)      // 已归档合同数

    // 日历相关
    const currentDate = ref('')
    const currentMonth = ref(new Date().getMonth())
    const currentYear = ref(new Date().getFullYear())
    const currentMonthName = ref('')
    const daysInMonth = ref(0)

    // 天气相关
    const weatherInfo = ref({
      temp: '加载中',
      description: '获取天气中...'
    })

    // 统计模态框控制
    const showStatsModal = ref(false)
    let contractChart = null  // 图表实例

    // 加载状态和错误信息
    const loading = ref(true)
    const errorMessage = ref('')

    // 判断是否为当前日期
    const isCurrentDay = (day) => {
      const now = new Date()
      return (
          day === now.getDate() &&
          currentMonth.value === now.getMonth() &&
          currentYear.value === now.getFullYear()
      )
    }

    // 获取合同统计数据（核心修改：调用后端接口）
    const fetchContractStats = () => {
      loading.value = true
      errorMessage.value = ''

      const customerId = customer.value?.id
      if (!customerId) {
        errorMessage.value = '用户信息不完整，请重新登录'
        loading.value = false
        return
      }

      // 调用后端接口：获取该顾客的合同统计数据
      axios.get(`/auth/customer/${customerId}/contract-stats`)
          .then(response => {
            const stats = response.data  // 后端返回的统计数据
            // 用真实数据更新状态
            pendingAuditCount.value = stats.pendingAuditCount || 0
            ongoingCount.value = stats.ongoingCount || 0
            completedCount.value = stats.completedCount || 0
            archivedCount.value = stats.archivedCount || 0
          })
          .catch(error => {
            console.error('获取合同统计数据失败', error)
            // 根据错误类型显示提示
            if (error.response?.status === 404) {
              errorMessage.value = '未找到您的合同数据'
            } else {
              errorMessage.value = '获取统计数据失败，请刷新页面重试'
            }
          })
          .finally(() => {
            loading.value = false  // 无论成功失败，都结束加载
          })
    }

    // 初始化图表（使用真实数据）
    const initChart = () => {
      nextTick(() => {  // 等待DOM更新后初始化图表
        const ctx = document.getElementById('contractChart')
        if (!ctx) return  // 避免DOM未加载时出错

        // 销毁旧图表（防止重复创建）
        if (contractChart) {
          contractChart.destroy()
        }

        // 创建新图表
        contractChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ['待审核', '进行中', '已完成', '已归档'],
            datasets: [{
              data: [
                pendingAuditCount.value,
                ongoingCount.value,
                completedCount.value,
                archivedCount.value
              ],
              backgroundColor: [
                '#0d6efd',  // 待审核：蓝色
                '#ffc107',  // 进行中：黄色
                '#28a745',  // 已完成：绿色
                '#343a40'   // 已归档：黑色
              ],
              borderWidth: 0
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                position: 'bottom'  // 图例在底部
              }
            },
            cutout: '70%'  // 环形图内径比例
          }
        })
      })
    }

    // 模态框控制方法
    const openStatsModal = () => {
      showStatsModal.value = true
      nextTick(() => {
        initChart()  // 打开模态框后初始化图表
      })
    }

    const closeStatsModal = () => {
      showStatsModal.value = false
    }

    // 导航方法（跳转到对应页面）
    const goToAuditContracts = () => {
      router.push('/customer/audit-contracts')
    }

    const goToOngoingContracts = () => {
      router.push('/customer/ongoing-contracts')
    }

    const goToContracts = () => {
      router.push('/customer/contracts')
    }

    const goToArchivedContracts = () => {
      router.push('/customer/archived-contracts')
    }

    // 退出登录
    const logout = () => {
      localStorage.removeItem('user')
      store.commit('setUser', null)
      router.push('/login')
    }

    // 更新日期和日历信息
    const updateDateInfo = () => {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth()
      const day = now.getDate()
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

      currentDate.value = `${year}年${month + 1}月${day}日 ${days[now.getDay()]}`
      currentMonth.value = month
      currentYear.value = year
      currentMonthName.value = monthNames[month]
      daysInMonth.value = new Date(year, month + 1, 0).getDate()  // 当月天数
    }

    // 获取天气信息（模拟）
    const fetchWeather = () => {
      // 实际项目中可替换为天气接口
      const weatherData = {
        temp: Math.floor(Math.random() * 30) + 10,
        description: ['晴天', '多云', '小雨', '阴天'][Math.floor(Math.random() * 4)]
      }
      weatherInfo.value = weatherData
    }

    // 切换月份
    const prevMonth = () => {
      currentMonth.value = (currentMonth.value - 1 + 12) % 12
      if (currentMonth.value === 11) currentYear.value--
      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      currentMonthName.value = monthNames[currentMonth.value]
      daysInMonth.value = new Date(currentYear.value, currentMonth.value + 1, 0).getDate()
    }

    const nextMonth = () => {
      currentMonth.value = (currentMonth.value + 1) % 12
      if (currentMonth.value === 0) currentYear.value++
      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      currentMonthName.value = monthNames[currentMonth.value]
      daysInMonth.value = new Date(currentYear.value, currentMonth.value + 1, 0).getDate()
    }

    // 组件挂载时初始化
    onMounted(() => {
      updateDateInfo()
      fetchWeather()
      fetchContractStats()  // 加载真实统计数据

      // 每天更新一次日期和天气
      setInterval(() => {
        updateDateInfo()
        fetchWeather()
      }, 24 * 60 * 60 * 1000)
    })

    // 组件销毁时清理图表
    onUnmounted(() => {
      if (contractChart) {
        contractChart.destroy()
      }
    })

    return {
      contactName: customer.value?.contactName || '访客',
      pendingAuditCount,
      ongoingCount,
      completedCount,
      archivedCount,
      currentDate,
      currentMonthName,
      currentYear,
      daysInMonth,
      weatherInfo,
      prevMonth,
      nextMonth,
      isCurrentDay,
      loading,
      errorMessage,
      logout,
      goToAuditContracts,
      goToOngoingContracts,
      goToContracts,
      goToArchivedContracts,
      showStatsModal,
      openStatsModal,
      closeStatsModal
    }
  }
}
</script>

<style scoped>
/* 样式保持不变（省略） */
</style>

<style scoped>
/* 原有样式保持不变 */
.customer-home {
  padding: 20px;
  max-width: 100%;
}

.header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.header-content {
  width: 100%;
}

.welcome-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f9fa;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  font-size: 14px;
  border: none;
}

.btn-primary { background-color: #3498db; color: white; box-shadow: 0 4px 6px rgba(52, 152, 219, 0.2); }
.btn-secondary { background-color: #7f8c8d; color: white; box-shadow: 0 4px 6px rgba(127, 140, 141, 0.2); }
.btn-info { background-color: #34c6d3; color: white; box-shadow: 0 4px 6px rgba(52, 198, 211, 0.2); }
.btn-warning { background-color: #f39c12; color: #212529; box-shadow: 0 4px 6px rgba(243, 156, 18, 0.2); }
.btn-success { background-color: #27ae60; color: white; box-shadow: 0 4px 6px rgba(39, 174, 96, 0.2); }
.btn-dark { background-color: #2c3e50; color: white; box-shadow: 0 4px 6px rgba(44, 62, 80, 0.2); }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.main-content .row {
  display: flex;
  gap: 20px;
}

.main-content .col-lg-8 {
  flex: 1;
}

.main-content .col-lg-8 > div {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.stats-cards .card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 15px;
  background-color: white;
}

.stats-cards .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stats-cards .card-body {
  padding: 18px;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  margin-right: 10px;
  display: block;
}

.stat-desc {
  font-size: 14px;
  color: #6c757d;
  display: block;
}

.card-link {
  color: #3498db;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.card-link:hover {
  color: #2980b9;
  text-decoration: underline;
}

.main-content .col-lg-4 {
  flex: 0 0 300px;
  max-width: 300px;
}

.main-content .col-lg-4 > div {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.calendar {
  padding: 15px;
}

.calendar-header {
  margin-bottom: 15px;
  text-align: center;
}

.month-year {
  font-size: 18px;
  font-weight: 600;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.day-header {
  text-align: center;
  font-weight: 500;
  padding: 5px;
  color: #6c757d;
}

.calendar-day {
  text-align: center;
  padding: 5px;
  min-height: 30px;
}

.day-number {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.current-day {
  background-color: #3498db;
  color: white;
  font-weight: 600;
}

.loading-container {
  text-align: center;
  padding: 50px;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-container {
  text-align: center;
  padding: 50px;
}

.error-message {
  color: #e74c3c;
  font-size: 16px;
  padding: 10px;
  border-radius: 4px;
  background-color: #f8d7da;
  display: inline-block;
}

.icon-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hover-effect {
  transition: transform 0.3s, box-shadow 0.3s;
}

.hover-effect:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 新增：统计模态框样式 */
.stats-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.stats-modal {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 90%;
  max-height: 80vh;
  overflow: auto;
}

.stats-modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.stats-modal-body {
  padding: 20px;
}

.stats-modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
  text-align: right;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #6c757d;
  transition: color 0.3s;
}

.close-btn:hover {
  color: #343a40;
}

.chart-container {
  margin-bottom: 20px;
}

.stats-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-item {
  padding: 10px;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.stat-label {
  font-size: 14px;
  color: #6c757d;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
}
</style>